<template>
	<view class="main animated fadeIn faster">
		<view class="content position-fixed z-index-100" :style="{'paddingTop':$store.state.statusBarHeight+'px','backgroundColor':bgcolor}">
			<view class="title">
				<view class="goback" @click="goback">
					<image src="../../static/组 2457.png"></image>
				</view>
				<text>做任务赚经验值</text>
			</view>
		</view>
		<view class="Experience">
			<text>我的经验值</text>
			<view class="value">
				<view class="left">0</view>
				<view class="right">兑换优惠券</view>
			</view>
			<view class="icon">
				<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E8%B7%AF%E5%BE%84%2034.png"></image>
			</view>
		</view>
		<view class="box">
			<view class="top">
				<view class="days">
					<view class="left">已连续签到<text>1</text>天</view>
					<view class="remind">签到提醒<switch checked="true" color="#e8b2dc" style="transform:scale(0.7)"/></view>
				</view>
				<view class="dayList">
					<view class="day_item" v-for="i in SigninColumn" :key="i.dex">
						<view class="top" :style="{ background: i.bgc}">
							<view class="num">{{i.num}}</view>
							<image :src="i.src"></image>
						</view>
						<view class="bottom">{{i.text}}</view>
					</view>
				</view>
			</view>
			<view class="bottom">
				<view class="DailyTasks">
					<view class="title">
						<text>每日任务</text>
						<view class="desc">任务每日0点刷新，记得每天都来看看哦</view>
					</view>
					<view class="btn">一键领取</view>
				</view>
				<view class="taskList">
					<view class="taskitem" v-for="i in 4" :key="i.id">
						<view class="left">
							<view class="title">订单交易消费</view>
							<view class="reward">
								<text>奖励</text>
								<view class="icon">
									<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%204227.png"></image>
								</view>
								<view class="amount">500</view>
							</view>
						</view>
						<view class="right">
							<view class="btn">领取任务</view>
							<view class="progress">0/1</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import store from '@/store/index.js';
	export default {
		data() {
			return {
				ctype:0,
				bgcolor:'transparent',
				SigninColumn:[
					{
						num: "×1",
						dex: 0,
						text: "已签",
						bgc: "#DADBDB",
						src: "https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%204127.png"
					},
					{
						num: "×1",
						dex: 1,
						text: "第2天",
						bgc: "linear-gradient(#D951C6 1%, #FB9AB0 100%);",
						src: "https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%204127.png"
					},
					{
						num: "×1",
						dex: 2,
						text: "第3天",
						bgc: "linear-gradient(#5DB0FE 1%, #86F5C9 100%);",
						src: "https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%204127.png"
					},
					{
						num: "×1",
						dex: 3,
						text: "第4天",
						bgc: "#FFCC7B",
						src: "https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%204127.png"
					},
					{
						num: "×1",
						dex: 4,
						text: "第5天",
						bgc: "linear-gradient(#5DB0FE 0%, rgba(93,176,254,0.8) 1%, #E8BAFC 100%);",
						src: "https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%204127.png"
					},
					{
						num: "×1",
						dex: 5,
						text: "第6天",
						bgc: "#D83F7D",
						src: "https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%204127.png"
					},
					{
						num: "可抽",
						dex: 6,
						text: "王者皮肤",
						bgc: "#63C6B3",
						src: "https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%204127.png"
					}
				]
			}
		},
		onPageScroll(e) {
			let scrollTop = e.scrollTop
			if (scrollTop > 10) {
				this.bgcolor = '#ffffff'
			}else{
				this.bgcolor = 'transparent'
			}
		},
		methods: {
			changType(type){
				this.ctype = type
			},
			goback() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style scoped lang="scss">
.main {
	overflow: hidden;
	.content {
		width: 100%;
	}
	.Experience {
		margin: 240rpx 0 0 60rpx;
		overflow: hidden;
		text {
			font-weight: 700;
			font-size: 32rpx;
		}
		.value {
			display: flex;
			align-items: center;
			margin-top: 16rpx;
			height: 60rpx;
			.left {
				font-size: 90rpx;
				font-weight: 700;
				margin-right: 10rpx
			}
			.right {
				display: inline-block;
				height: 40rpx;
				color: #fff;
				font-size: 26rpx;
				padding: 10rpx 30rpx 12rpx;
				margin-top: 6rpx;
				border-radius: 15rpx;
				background-color: #ff4f6c;
				box-shadow: 10rpx 10rpx 8rpx rgba(255, 79, 108, .2);
			}
		}
		.icon {
			image {
				margin-left: 18rpx;
				margin-top: 26rpx;
				width: 24.91rpx;
				height: 24.91rpx;
			}
		}
	}
	.box {
		width: 720rpx;
		height: 85vh;
		background-color: #fff;
		margin: 12rpx auto 0;
		border-radius: 50rpx;
		overflow: hidden;
		.top {
			width: 680rpx;
			height: 340rpx;
			background-color: #f5f5f5;
			margin: 30rpx auto 0;
			border-radius: 25rpx;
			overflow: hidden;
			.days {
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #878787;
				margin-top: 30rpx;
				.left {
					font-size: 32rpx;
					margin-left: 20rpx;
					font-weight: 700;
					text {
						font-size: 40rpx;
						color: #E63828;
						font-weight: 700;
						padding: 0 5rpx;
					}
				}
				.remind {
					margin-top: 10rpx;
					color: #878787;
				}
			}
			.dayList {
				width: calc(100% - 20rpx);
				margin: 30rpx 0 0 20rpx;
				display: flex;
				justify-content: space-around;
				.day_item {
					width: 12%;
					margin-right: 20rpx;
					.top {
						width: 100%;
						height: 139rpx;
						margin: 0;
						display: flex;
						flex-direction: column;
						align-items: center;
						.num {
							color: #FFF;
							margin: 10rpx 0 6rpx;
						}
						image {
							width: 48.62rpx;
							height: 51.65rpx;
						}
					}
					.bottom {
						width: 100%;
						height: 60rpx;
						margin-top: 10rpx;
						text-align: center;
						color: #898989;
						font-size: 24rpx;
						font-weight: 700;
					}
				}
			}
		}
		.bottom {
			width: 680rpx;
			height: 890rpx;
			background-color: #f5f5f5;
			margin: 40rpx auto 0;
			border-radius: 25rpx;
			overflow: hidden;
			.DailyTasks {
				display: flex;
				justify-content: space-around;
				margin-top: 30rpx;
				.title {
					display: flex;
					flex-direction: column;
					height: 90rpx;
					text {
						width: 100%;
						font-size: 34rpx;
						text-align: left;
						margin-left: 50rpx;
					}
					.desc {
						color: #9D9D9E;
						font-size: 24rpx;
						font-weight: normal;
						margin-top: 10rpx;
					}
				}
				.btn {
					background-color: #C7C8C9;
					color: #fff;
					padding: 8rpx 20rpx;
					border-radius: 50rpx;
					height: 50rpx;
					line-height: 50rpx;
					margin-top: 30rpx;
				}
			}
			.taskList {
				margin-top: 50rpx;
				width: 100%;
				height: 500rpx;
				.taskitem {
					width: 100%;
					height: 160rpx;
					background-image: url(https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%204148.png);
					background-size: 100% 100%;
					display: flex;
					justify-content: space-around;
					margin-bottom: 20rpx;
					.left,.right {
						height: 100%;
						display: flex;
						align-items: center;
					}
					.left {
						display: flex;
						flex: 1;
						justify-content: left;
						margin-top: 40rpx;
						flex-direction: column;
						padding-left: 34rpx;
						.title {
							width: 100%;
							height: 40rpx;
							font-size: 32rpx;
							color: #231815;
							font-weight: 700;
							margin-bottom: 5rpx;
						}
						.reward {
							display: flex;
							width: 100%;
							color: #595757;
							.icon {
								image {
									padding: 0 10rpx;
									width: 29.86rpx;
									height: 23.96rpx;
									margin-bottom: 4rpx;
								}
							}
							.amount {
								margin-top: 2rpx;
								color: #F42052;
								font-weight: 700;
								font-size: 28rpx;
							}
						}
					}
					.right {
						display: flex;
						flex-direction: column;
						margin-right: 30rpx;
						.btn {
							background: linear-gradient( 90deg, #ED65CE 0%, #E966CF 2%, #859BF0 69%, #5DB0FE 99%);;
							color: #fff;
							padding: 8rpx 20rpx;
							border-radius: 50rpx;
							height: 50rpx;
							line-height: 50rpx;
							margin: 30rpx 0 10rpx;
						}
					}
				}
			}
		}
	}
}
.title {
	display: flex;
	align-items: center;
	font-weight: 700;
	height: 80rpx;
	.goback {
		image {
			margin-left: 50rpx;
			width: 20rpx;
			height: 30rpx;
		}
	}
	text {
		flex: 1;
		margin-right: 50rpx;
		font-size: 34rpx;
		text-align: center;
	}
}
.pt-300 {
	padding-top: 300rpx;
}
</style>
